<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import uploadImage from '@/components/uploadImage/index.vue'
  import { formValidate, showModal } from '@/utils/tools'
  import { postRefundApplication, postRefundInfo } from '@/api/training'
  const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
  const refundsFile = ref([])
  const refundForm = ref({
    id:0,
    name:'',
    regId:0,
    sourceId:0,
    orderTypeEnum:0,
    refundInstructions:'',
    file:'',
    contacts:'',
    contactsPhone:'',
    payTime:'',
    createdTime:'',
  })

  const signFromRule = {
    regId:{message:'请输入姓名'},
    sourceId:{message:'请选择性别'},
    orderTypeEnum:{message:'请输入身份证信息'},
    contacts:{message:'请输入联系人'},
    contactsPhone:{message:'请输入联系电话',patternType:'phone'},
    refundInstructions:{message:'请输入退款说明'}
  }
  onLoad((options:any) => {
    const params = JSON.parse(options.params)
    refundForm.value.name = params.name
    refundForm.value.id = params.id
    refundForm.value.regId = params.regId
    refundForm.value.sourceId = params.sourceId
    refundForm.value.orderTypeEnum = params.orderTypeEnum
    refundForm.value.createdTime = params.createdTime
    refundForm.value.payTime = params.payTime
    if(refundForm.value.id != 0){
      postRefundInfo({id:refundForm.value.id}).then(res => {
        refundForm.value.contacts = res.data.contacts
        refundForm.value.contactsPhone = res.data.contactsPhone
      })
    }
  })

  const refundClick = () => {

    const formData = JSON.parse(JSON.stringify(refundForm.value))
    formData.file = refundsFile.value.length == 0 ? '': JSON.stringify(refundsFile.value)
    formValidate(formData,signFromRule).then(res => {
      showModal({
        content:'您提交的退费申请，需要审核，审核预计3个工作日内',
        confirmText:'我已知晓',
        success(result) {
          if(result.confirm){
            postRefundApplication(formData).then(res => {
              if(res.code == 200 && res.data){
                if(refundForm.value.id == 0){
                  uni.redirectTo({url:`/pageSignUp/refundsDetails/refundsDetails?id=${res.data}`})
                }else{
                  uni.navigateBack()
                }
              }
            })
          }
        },
      })
    })
  }
</script>

<template>
  <view class="refunds-form">
    <xx-title title="退费申请"/>
    <view class="refunds-info">
      <view class="title">
        <text>退费信息</text>
        <text class="tip"><up-icon name="icon-circle"></up-icon> 温馨提示：审核预计3个工作日内</text>
      </view>
      <view class="refunds-info-body">
        <view class="body-title">{{refundForm.name}}</view>

        <view class="refunds-item">
          <view class="label">支付时间：</view>
          <view class="value">{{ refundForm.payTime }}</view>
        </view>


        <view class="refunds-item">
          <view class="label">创建时间：</view>
          <view class="value">{{ refundForm.createdTime }}</view>
        </view>
      </view>

    </view>
    <view class="refunds-info">
      <view class="title">申请退款</view>
      <view class="sign-body">
        <view class="sign-item up-and-down">
          <view class="sign-label required">退款说明</view>
          <view class="sign-value">
            <textarea v-model="refundForm.refundInstructions"/>
          </view>
        </view>
        <view class="sign-item">
          <view class="sign-label required">联系人</view>
          <view class="sign-value">
            <input type="text" v-model="refundForm.contacts" placeholder="请输入联系人"/>
          </view>
        </view>
        <view class="sign-item">
          <view class="sign-label required">联系电话</view>
          <view class="sign-value">
            <input type="number"  v-model="refundForm.contactsPhone" placeholder="请输入联系电话"/>
          </view>
        </view>
      </view>
    </view>
    <view class="refunds-info">
      <view class="title">证明材料</view>
      <view class="info-image">
        <upload-image v-model="refundsFile"/>
      </view>
    </view>

    <view class="bottom-fixed" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
      <view class="seizeASeat"></view>
    </view>
    <view class="bottom-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
      <view class="group-registration" @click="refundClick">申请退款</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .refunds-form{
    width: 100%;
    box-sizing: border-box;
    background-color: #F3F3F3;
    min-height: 100vh;
    padding-top: 1rpx;
    .refunds-info{
      padding: 24rpx 32rpx;
      margin-top: 20rpx;
      margin-left: 28rpx;
      margin-right: 28rpx;
      background-color: #FFFFFF;
      border-radius: 20rpx;
      .title{
        font-weight: 500;
        font-size: 32rpx;
        color: #21252E;
        padding-bottom: 10rpx;
        border-bottom: 1rpx solid #EBEBEB;
        display: flex;
        align-items: center;
        .tip{
          font-size: 22rpx;
          color: #fc5b5b;
          margin-left: 5rpx;
        }
      }
      .refunds-info-body{
        margin-top: 20rpx;
        box-sizing: border-box;
        background-color: #F7F7F7;
        padding: 20rpx;
        border-radius: 20rpx;
        .body-title{
          font-size: 28rpx;
          color: #505363;
          margin-bottom: 20rpx;
        }
        .refunds-item{
          display: flex;
          justify-content: space-between;
          margin-top: 10rpx;
          .label{
            width: 120rpx;
            color: #818496;
            font-size: 24rpx;
          }
          .value{
            text-align: right;
            font-size: 24rpx;
            color: #818496;
            width: calc(100% - 120rpx);
          }
        }
      }
      .info-image{
        margin-top: 20rpx;
      }
    }
    .sign-item{
      padding: 24rpx 0;
      display: flex;
      align-items: flex-start;
      border-bottom: 1px solid #F5F5F5;
      &:last-child{
        border-bottom: none;
      }
      .sign-label{
        color: #505363;
        font-size: 28rpx;
        width: 160rpx;
        &.required{
          position: relative;
          padding-left: 20rpx;
          &:before{
            content: '*';
            display: block;
            position: absolute;
            color: #ff3c3c;
            top: 0;
            left: 0;
          }
        }
      }
      .sign-value{
        width: calc(100% - 160rpx);
        font-size: 28rpx;
        color: #21252E;
        font-weight: 500;
        input{
          width: 100%;
          font-weight: 500;
        }
        textarea{
          background-color: #F7F7F7;
          border-radius: 12rpx;
          box-sizing: border-box;
          font-weight: 500;
          width: 100%;
          padding:10rpx;
          height: 150rpx;
        }
      }
    }
    .up-and-down{
      display: block;
      .sign-label{
        width: 100%;
        margin-bottom: 12rpx;
      }
      .sign-value{
        width: 100%;
      }
    }

    .bottom-fixed{
      padding-top: 14px;
      .seizeASeat{
        height: 100rpx;
      }
    }
    .bottom-btn{
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-left: 28rpx;
      padding-right: 28rpx;
      box-sizing: border-box;
      padding-top: 14rpx;
      background-color: #FFFFFF;
      .group-registration{
        padding: 16rpx 0;
        margin: 0 20rpx;
        text-align: center;
        border-radius: 16rpx;
        box-sizing: border-box;
        background: #92C75B;
        color: #FFFFFF;
        font-weight: 500;
        letter-spacing: 2rpx;
      }
    }
  }
</style>
